<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='https://unpkg.com/react@17/umd/react.development.js'></script>
    <script src='https://unpkg.com/react@17/umd/react-dom.development.js'></script>
    <!-- 生产环境中不建议使用 -->
    <script src='https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js'></script>
    <!-- PropTypes文件 -->
    <script src='https://unpkg.com/prop-types@15.6.2/prop-types.js'></script>
</head>

<body>
    <div id='app'>
    </div>
    <script type='text/babel'>
        /*
            在你开始学习本节之前，我先告诉你一个事实。今天学的这个生命周期钩子，未来的开发过程中基本不会用到，所以别学的用力过猛了，了解一下就好了。
            先说结论：只有当你的state的值在任何时候都取决于props的时候，这个钩子才有作用
        */
        class Demo extends React.Component{
            constructor(props){
                super(props)
            }

            state = {count:0}
            add = ()=>{
                this.setState({count:this.state.count+1})
            }

            // 这个钩子跟别人还不一样，别的钩子都是放在类的prototype上，这玩意是放在类上的，还得加个static。而且这个钩子你还必须返回一个状态对象(state)或者null，要不然还给你报错
            static getDerivedStateFromProps(props,state){

                // 这个钩子必须返回一个状态对象(state)或者null，你返回的对象里如果有和原来的state里相同的key，那么会覆盖掉原来的state里的。最离谱的是覆盖之后的key就不能setState更新了。那你一定会问了，那这玩意设计它干啥啊，这么鸡肋。其实有一个作用，就是这个钩子可以接受两个参数，props和state。所以设计它的目的就是，让state由props来决定。
                // return {
                //     count:1
                // }
                return props
            }

            render(){
                return (
                    <div>
                        <h1>当前求和为: {this.state.count}</h1>
                        <button onClick={this.add}>+1</button>    
                    </div>
                )
            }   
        }

        ReactDOM.render(<Demo/>,document.getElementById('app'))
    </script>
</body>

</html>